עיצוב אתרים וממשקי משתמש - שיפור חווית המשתמש 

חווית המשתמש באתרי אינטרנט או באפליקציות לאינטרנט נשענת על שני נדבכים מרכזיים: אסתטיקה וטכנולוגיה. האם עיצוב האתר נקי, ידידותי ופשוט להבנה?  האם קיימים באתר אלמנטים טכנולוגיים מסוימים שהופכים את חווית הצפייה או התפעול שלו לאטרקטיביים יותר? מאמר זה מיועד לבעלי רקע בתחום בניית אתרים או לאלו שמעוניינים ללמוד על ההיבטים המתקדמים יותר בתחום עיצוב אתרים,  גם ללא רקע קודם. נבחן כיצד כלים וטכניקות מתקדמות בפיתוח ועיצוב אתרים יכולים לשפר את חווית המשתמש הן ברמת העיצוב והן ברמה הטכנולוגית.

בניית אתר אינטרנט מתקדם היום מחייב לא רק עיצוב אתר יפה או התבססות על טכנולוגיות מתקדמות אלא שילוב הדוק ויעיל ביניהם. אתרי אינטרנט ותוכנות מבוססות דפדפן (כגון שירותי SaaS) יכולים היום לספק למשתמש חוויה שמדמה שימוש באפליקציה שולחנית (desktop application) . הדמייה זאת מתבצעת באמצעות מספר כלים שנסקור בהמשך אולם באופן כללי, ניתן להצביע על מספר פרמטרים בהם הטכנולוגיות (או טכניקות ליתר דיוק) חוללו שינוי בגישה שלנו לאינטרנט: רציפות, אינטרקטיביות ותנועה.

 רציפות ואינטרקטיביות באמצעות Ajax

הפרמטר של רציפות מתייחס לאופן המעבר שאנו מורגלים אליו ביחס לביצוע פעולות שונות ברשת (מעבר בין דפים לדוג'). כאשר אנו עובדים עם תוכנות שולחניות (כגון תוכנות  Office) אין "רענון" של כל המסך בכל פעם שאנחנו מבצעים פעולה (שמירה, פתיחת דפים חדשים, וכו'). באינטרנט, לעומת זאת, כשאנחנו עוברים בין דפים שונים באותו אתר, אנו נאלצים לטעון מחדש כל הדף (גם אם בפועל, רק חלק מסוים ממנו משתנה בכל פעם). אותן שניות בודדות יוצרות תחושה מקוטעת של צפייה באוסף של דפים. כאן נכנס השימוש ב-Ajax.

באמצעות טכניקות פיתוח כגון AJAX ניתן לספק באתרי אינטרנט חווית משתמש שמזכירה את אפליקציות שולחניות. בשנת 2005 הוטבע המונח Ajax (Asynchronous JavaScript and XML) כדי לתאר טכניקה תקשורת מתקדמת בין הדפדפן (client-side) לשרת (server-side). טכניקה זו מאפשרת לרענן רק חלק מהדף בו אנו צופים וכך ליצור חווית גלישה רציפה יותר. גם אם טרם נתקלתם במונח עצמו, אם אתם משתמשים ב-Facebook, Gmail או מבצעים חיפוש בגוגל, אז אתם משתמשים בטכנולוגיית Ajax. שימו לב שבעת השימוש ב-Facebook, כאשר עוברים בין הדפים, לא נטען כל הדף מחדש אלא רק אזור התוכן המרכזי. ב-Gmail, ה-inbox מתעדכן באופן שוטף גם אם לא לחצתם על "רענן" ואתם יכולים לבצע drag and drop של קבצים לתוך הודעת הדואר שלכם ישירות מה-desktop. בחיפוש בגוגל, אתם מקבלים הצעות למונחי חיפוש (השלמה אוטומטית) תוך כדי ההקלדה בתיבת החיפוש. כל הדוגמאות האלו מתארות איך Ajax גורם לנו לחווית משתמש רציפה יותר, שמזכירה שימוש בתוכנה יותר מאשר שימוש באתר אינטרנט.

 תנועה באמצעות Jquery, Mootools ושות'

סדרה נוספת של כלים שהופכת את החוויה שלנו באינטרנט לנעימה ומתקדמת יותר הם ספריות הפיתוח מבוססות Javascript. ספריות אלו מאפשרות להטמיע באתר יכולות דינאמיות שבדר"כ לא היינו מצפים מאתרי אינטרנט. לדוג', פתיחה חלקה של אזורים מסוימים, מעבר בפייד בין תמונות וטקסטים וכו'. אחד האפקטים החביבים (גם אם כבר קצת ישן) לפתיחה של תמונות הוא ה-lightbox (אפשרות לראות דוגמא בדף עיצוב ממשק משתמש). ספריית Jquery UI מאפשר ליצור בקלות רבה אפקטים מבוססי Javascript לטובת עיצוב UI מתקדם. למי שמעוניין לשלב טכניקות Jquery מתקדמות אולם חסר את הרקע התכנותי כדי לממש אותן, IXedit (ixedit.com) הינו כלי חינמי שמאפשר הטמעה של אפקטים "on the fly" על גבי דפי אינטרנט קיימים. לשם המחשה, טופס יצירת הקשר שבתחתית העמוד עושה שימוש בספריית Jquery כדי ליצור את אפקט הפתיחה החלקה. התפריט העליון עושה שימוש ב-mootools לטובת הצגת התפריטים הנפתחים. גם הצגה של סרטוני youtube יכולה להיות מעניינת קצת יותר עם Jquery -

פלאש דינאמי

פלאש נתפס כשיטה בעייתית ליצירת אתרים משתי סיבות עיקריות: ידידותיות למנועי חיפוש (SEO) ויכולת עדכון האתר (דינאמיות). מבחינת קידום אתרים, במשך תקופה ארוכה, מנועי חיפוש התקשו לסרוק את התוכן של אתרי פלאש. כיוון שהטקסט נשמר באתרים אלו כמו תמונה, הזחלן של מנוע החיפוש לא היה יכול לאנדקס באופן יעיל את תוכן האתר, והדבר היה פוגע ביכולת קידום האתר. עם זאת, יש כיום טכניקות שמאפשרות ליצור פלאש "קריא" למנועי חיפוש, אולם עדיין שימוש בפלאש כטכנולוגיה בלעדית לבניית אתר תדמית מקשה מאוד על הקידום ודרוש ידע מתקדם בבניית אתרי אינטרנט מבוססי פלאש ידידותיים למנועי חיפוש. הפן השני הוא יכולת השליטה והניהול של התכנים באתר (אתר דינמי). גם לכך יש היום פתרונות יעילים המאפשרים ליצור, למשל, אנימציות פלאש דינאמיות אשר המשתמש יכול לעדכן בהן טקסטים ותמונות ללא צורך בידע תכנותי בפלאש ותוכנות עריכה מתקדמות. כלים אלו מבוססים על פלאש ו-XML באופן בו קובץ הפלאש (Swf – קובץ סגור) ניגש לקובץ ה-XML (קובץ טקסטואלי פשוט שניתן לערוך) וקורא ממנו את הנחיות הפעולה והתצוגה (לדוג' בגלריה דינאמית: אלו תמונות להציג, איזה מעבר יהיה בין תמונה לתמונה, ואילו טקסטים וקישורים יופיעו). בנוסף, באמצעות שימוש מושכל בעיצוב מבוסס CSS בשילוב JS יש יכולת להגיע ל-Look & feel של אתרי פלאש ללא שימוש בפלאש כלל.

 HTML5

HTML5 הינו הגרסה הבאה של תקן הכתיבה HTML (דפדפני אינטרנט יודעים להציג דפים הכתובים ב-HTML). בגרסה האחרונה תתאפשר בניית אתר אינטרנט על ידי שימוש בתגיות חדשות לטובת הצגת סרטים, יכולות Drag & drop, שמירת נתונים במצב offline (לטובת אפליקציות ווב לא מקוונות) ועוד. תקן זה יאפשר יצירת דפים אינטרקטיביים, מהירים ויעילים יותר מהאלו הנוצרים בתקן הקיים אולם לא כל הדפדפנים עדיין תומכים בתקן החדש.

 סיכום

הטכניקות שהוצגו לעיל נועדו לתאר מהם הכלים העומדים לרשותנו כמפתחים או מעצבי UI בפיתוח אתרים ואפליקציות לרשת. אתר אינטרנט מתקדם מסייע גם בהיבט המיתוג באינטרנט של העסק (לקריאה נוספת על מיתוג אתרים ומיתוג ברשת). שימוש מוגזם בטכניקות האלו יעייף או יעיק על הגולש ושימוש דל מדי ייתן תחושה של אתר מיושן. קיימת נטייה אצל חלק מהמפתחים להתלהב מכלי או טכנולוגיה חדשה, ואז ל"דחוף" אותה באופן מאולץ בתוך האתר. רצוי לבחון קודם מה התכלית של הפעולה שאנו מעוניינים לאפשר, האם יש מקום לשלב טכניקות מתקדמות ואז לבדוק אילו כלים ישרתו את המטרה של עיצוב אתר חדשני.